<template>
	<view class="mainbgc" v-if="pageshow">
		<view class="all">
			<u-swiper :list="dataAll.images_text" height="300" @click="previewimg"></u-swiper>
			<view class="section">
				<view class="message">
					<view class="word_weight">{{dataAll.ckmj}}㎡{{dataAll.ckitem.name}}</view>
					<!-- <view class="company">公司名称：河南斯基货建筑公司</view> -->
					<view class="flexleft margin_top">
						<view class=" location"></view>
						<view class="diqu">{{dataAll.cityinfo}}</view>
						<view class="word_bluer">距我{{kmUnit(Number(dataAll.distance))}}</view>
					</view>
					<view class="flexleft margin_top">
						<u-icon name="phone-fill" color="#333" size="14"></u-icon>
						<view class="diqu">{{dataAll.mobile_text}}</view>
					</view>
				</view>
			</view>
			<!-- 中间部分 -->
			<view class="section">
				<view class="nav flexleft flexbetween">
					<view class="one">
						<view class="word_black">{{dataAll.ckmj}}</view>
						<view class="cangku word_greys">仓库面积</view>
						<view class="word_greys m">（㎡）</view>
					</view>
					<view class="one">
						<view class="word_black">{{dataAll.ksmj}}</view>
						<view class="keshou word_greys">可售面积</view>
						<view class="word_greys m">（㎡）</view>
					</view>
					<view class="one">
						<view class="word_red">{{dataAll.cszj}}</view>
						<view class="chushou word_greys">出售总价</view>
						<view class="word_greys m">（元）</view>
					</view>
				</view>
			</view>
			<!--  -->
			<u-sticky>
				<u-tabs :list="list1" @click="onClick"></u-tabs>
			</u-sticky>
			<view class="section">
				<view class="message" v-show="current==0">
					<view class="text_weight">仓库详情</view>
					<view class="flexbetween message_cangku">
						<view class="message_left">仓库类型</view>
						<view class="message_right">{{dataAll.ckitem.name}}</view>
					</view>
					<view class="flexbetween message_cangku">
						<view class="message_left">底层层高</view>
						<view class="message_right">{{dataAll.dccg}}</view>
					</view>
					<view class="flexbetween message_cangku">
						<view class="message_left">是否保税区</view>
						<view class="message_right">{{dataAll.bsq_status==0?"否":"是"}}</view>
					</view>
					<view class="flexbetween message_cangku">
						<view class="message_left">建造年代</view>
						<view class="message_right">{{dataAll.jznd}}</view>
					</view>
					<view class="flexbetween message_cangku">
						<view class="message_left">建设状态</view>
						<view class="message_right">{{dataAll.jszt}}</view>
					</view>
					<view class="flexbetween message_cangku">
						<view class="message_left">耐火等级</view>
						<view class="message_right">{{dataAll.nhdj}}</view>
					</view>
					<view class="flexbetween message_cangku">
						<view class="message_left">适用类型</view>
						<view class="message_right">{{dataAll.sylx}}</view>
					</view>
					<view class="flexbetween message_cangku">
						<view class="message_left">发票开具</view>
						<view class="message_right">{{dataAll.fpkj_status==0?"不开发票":"开发票"}}</view>
					</view>
					<view class="flexbetween message_cangku">
						<view class="message_left">消防检验</view>
						<view class="message_right">{{dataAll.xfjy}}</view>
					</view>
				</view>
				<view class="facility" v-if="current==0">
					<view class="text_weight">仓库简介</view>
					<view class="facility_zi">{{dataAll.ckjj}}</view>
				</view>
				<!--  -->
				<view class="facility" v-show="current==1">
					<view class="text_weight">设施信息</view>
					<view class="flexbetween message_cangku">
						<view class="message_left">地坪材料</view>
						<view class="message_right">{{dataAll.dpcl}}</view>
					</view>
					<view class="flexbetween message_cangku">
						<view class="message_left">地坪功能</view>
						<view class="message_right">{{dataAll.dpgn}}</view>
					</view>
					<view class="flexbetween message_cangku">
						<view class="message_left">园区保安</view>
						<view class="message_right">{{dataAll.yqab}}</view>
					</view>
					<view class="flexbetween message_cangku">
						<view class="message_left">仓库设施</view>
						<view class="message_right">{{dataAll.ckss}}</view>
					</view>
				</view>
				
				<!--  -->
				<view class="facility" v-show="current==2">
					<view class="text_weight">园区信息</view>
					<view class="flexbetween message_cangku">
						<view class="message_left">建筑结构</view>
						<view class="message_right">{{dataAll.jzjg}}</view>
					</view>
					<view class="flexbetween message_cangku">
						<view class="message_left">供电电压</view>
						<view class="message_right">{{dataAll.gddy}}</view>
					</view>
					<view class="flexbetween message_cangku">
						<view class="message_left">供电方式</view>
						<view class="message_right">{{dataAll.gdfs}}</view>
					</view>
				</view>
				<view class="facility" v-if="current==2">
					<view class="text_weight">园区简介</view>
					<view class="facility_zi">{{dataAll.yqjj}}</view>
				</view>
				<!--  -->
				<view class="facility" v-if="current==3">
					<view class="text_weight">公司简介</view>
					<view class="facility_zi">{{dataAll.gsjj}}</view>
				</view>
			</view>
			<!-- footer -->
			<view class="footer flexbetween">
				<view class="flexleft">
					<view class="" @click="shareadd">
						<button open-type="share" class="footer_stars">
							<view class="share"></view>
							<view class=" share_zi">分享</view>
						</button>
					</view>
					<view class="footer_star" @click="collect">
						<!-- 已收藏 图片-->
						<view class="collect_star flexcolumn" v-show="dataAll.is_collect"></view>
						<view class="star flexcolumn " v-show="!dataAll.is_collect"></view>
						<view class="collect">收藏</view>
					</view>
				</view>
				<view class="flexleft footer_right" @click="phone(dataAll.mobile)">
					<view class="phones">拨打电话</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [{
					name: '仓库详情',
				}, {
					name: '设施信息',
				}, {
					name: '园区详情'
				}, {
					name: '公司简介'
				}],
				listid: 1,
				dataAll: {},
				lat: "",
				lng: "",
				current: 0,
				is_login: true,
				pageshow: false
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.getlocation()
		},
		onShow() {
			let _this = this
			if (!httpRequest.checkIsLogin()) {
				_this.is_login = false
			}
		},
		methods: {
			// 点击了轮播图
			previewimg(index) {
				let i = this.dataAll.images_text; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			shareadd() {
				httpRequest.request('/api/cc/addCcShareNum', 'GET', {
					id: this.listid,
				}, false, false, true).then(res => {})
			},
			onClick(e) {
				this.current = e.index
			},
			onShareAppMessage() {
				return {
					title: this.dataAll.ckmj + "㎡" + this.dataAll.ckitem.name,
					path: "pages/index/cangchugyxq?id=" + this.listid + "&invite_code=" + uni.getStorageSync(
						"invite_code"),
				}
			},
			// 收藏
			collect() {
				httpRequest.request('/api/cc/addCcCollect', 'GET', {
					id: this.listid,
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.init()
					}
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {})
			},
			// 小程序获取当前位置信息
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						//逆地址解析  坐标转地址信息
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.init()
					}
				});
			},
			init() {
				httpRequest.request('/api/cc/detail', 'GET', {
					id: this.listid,
					lat: this.lat,
					lng: this.lng
				}, false, false, true).then(res => {
					this.pageshow = true
					if (res.code == 1) {
						this.dataAll = res.data
					}
				})
			},
			kmUnit(m) {
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if (m >= 1000) {
						v = (m / 1000).toFixed(2) + 'km'
					} else {
						v = m + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-tabs__wrapper__nav__item {
		//平均分配
		flex: 1;
	}

	.all {
		padding-bottom: 200rpx;
	}

	.header {
		height: 437rpx;
		width: 100%;
		background-size: 100% 100%;
	}

	.section {
		padding: 30rpx 24rpx 0rpx 24rpx;
	}

	.message {
		padding: 30rpx 30rpx;
		background-color: #fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.nav {
		background-color: #fff;
		padding: 30rpx 80rpx 30rpx 80rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.company {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		padding: 30rpx 30rpx 30rpx 0rpx;
	}

	.facility {
		padding: 30rpx 30rpx;
		background-color: #fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 30rpx;
	}

	.diqu {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		padding-right: 27rpx;
	}

	.cangku {
		text-align: center;
		margin-top: 17rpx;
	}

	.keshou {
		text-align: center;
		margin-top: 17rpx;
	}

	.chushou {
		text-align: center;
		margin-top: 17rpx;
	}

	.one {
		text-align: center;
	}

	.m {
		padding-top: 2rpx;
	}

	.message_cangku {
		padding-top: 30rpx;
	}

	.message_left {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.message_right {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
	}

	.facility_zi {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		padding-top: 30rpx;
	}

	.footer {
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		bottom: 0rpx;
		background-color: #fff;
		padding: 30rpx 46rpx;
		padding-bottom: 57rpx;
	}

	.footer_stars {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

	}

	.footer_star {
		padding-left: 66rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.phones {
		background: #228DFF;
		border-radius: 13rpx 13rpx 13rpx 13rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		padding: 21rpx 42rpx 21rpx 43rpx;
	}

	.collect {
		margin-top: 13rpx;
	}

	.share_zi {
		margin-top: 13rpx;
	}
</style>